<template>
    <div class="header">
        <div v-for="(item, index) in fileList" :key="index" style="margin-left:32px">
            <div class="uploadBtn">
                <span style="padding-right: 30px;">
                    <i class="el-icon-document" style="padding:0 10px"></i> 
                    <span class="fileName" @click="downLoadFileBtn(item)">{{item.name}}</span>
                </span>
                <el-popconfirm 
                    title="是否确定删除该附件？"
                    @confirm="confirmDelFile(item)"
                >
                    <el-button class="refernce" slot="reference" icon="el-icon-circle-close" size="mini"></el-button>
                </el-popconfirm>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
    name: 'UploadFileShow',
    components: {},
})
export default class UploadFileShow extends Vue {
    @Prop() fileList;
    downLoadFileBtn(param) {
        this.$emit('emitDownLoadFile', param);
    }
    confirmDelFile(param) {
        this.$emit('emitConfirmDelFile', param);
    }
}
</script>
<style lang="scss" scoped>
.uploadBtn:hover {
    background: #f5f7fa;
}
.fileName:hover {
    text-decoration: underline;
    color: #48a2ff;
}
.refernce {
    border: none;
    background:rgba(255,255,255,0)
}
</style>
